<template>
		<div>
			<v-header :seller="seller"></v-header>
			<menu class="tab">
				<router-link class="tab-item" to="/goods"><i class="iconfont">&#xe62b;</i> 商品</router-link>
				<router-link class="tab-item" to="/ratings"><i class="iconfont">&#xe63c;</i> 评论</router-link>
				<router-link class="tab-item" to="/seller"><i class="iconfont" style="vertical-align: 1px;">&#xe604;</i> 商家</router-link>
			</menu>
			<keep-alive><router-view class="content" :seller="seller"></router-view></keep-alive>
		</div>
</template>

<script type="text/javascript">
		
		
		import Header from './components/header/header.vue'
			
		export default {
			data(){
				return {
					seller: {}
				}
			},
			components: {
				'v-header': Header
			},
			mounted(){
				this.$http.get('/api/seller').then(response => {
	
				    // get body data
				    this.seller = response.body.data
				
				}, response => {
				    // error callback
				    console.log('error')
				});
			},
		}
		
</script>

<style lang="less">
	
		@import '../static/less/mixin.less';
	
		.tab {
				display: flex;
				align-items: center;
				background-color: #fff;
				.border-1px(top,#ccc);
				.border-1px(bottom,#ccc);
				
				.tab-item {
					flex: 1;
					height: 40px;
					color: #7E8C8D;
					font-size: 14px;
					line-height: 40px;
					text-align: center;
					
					&.active {
						color: red;
					}
				}
		}
	
</style>